<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" xmlns:shiro="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
    <style>
        th, td {
            border: 1px solid black;
            padding: 1px;
            text-align: center;
        }
        .businessCard{
            width: 250px;
            height: 80px;
            font-size: 12px;
            border-collapse: collapse;
        }
        #qrcode{
            padding: 2px;
        }
        @media print {
            body {
                margin: 0;
                padding: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                min-height: 100vh;
            }
            body > *:not(#all) {
                display: none;
            }
            #all {
                margin: auto;
                position: relative;
                transform: translateX(-20%); /* 垂直居中微调 */
                transform: translateY(10%); /* 垂直居中微调 */
            }
        }
    </style>
</head>
<body>
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-property-edit" th:object="${property}">
        <input name="id" th:field="*{id}" type="hidden">
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">资产编号：</label>
            <div class="col-sm-8">
                <input name="propertyNumber" th:field="*{propertyNumber}" class="form-control" type="text" required disabled="disabled">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">资产名称：</label>
            <div class="col-sm-8">
                <input name="propertyName" th:field="*{propertyName}" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">使用人：</label>
            <div class="col-sm-8">
                <input name="user" th:field="*{user}" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">存放位置：</label>
            <div class="col-sm-8">
                <input name="placeStorage" th:field="*{placeStorage}" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">品牌：</label>
            <div class="col-sm-8">
                <input name="brand" th:field="*{brand}" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">配置信息：</label>
            <div class="col-sm-8">
                <input name="configurationInfo" th:field="*{configurationInfo}" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">入库日期：</label>
            <div class="col-sm-8">
                <div class="input-group date">
                    <input name="purchaseDate" th:value="${#dates.format(property.purchaseDate, 'yyyy-MM-dd')}" class="form-control" placeholder="yyyy-MM-dd" type="text" required>
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">使用部门：</label>
            <div class="col-sm-8">
                <input name="userDepartment" th:field="*{userDepartment}" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">领用状态：</label>
            <div class="col-sm-8">
                <div class="radio-box" th:each="dict : ${@dict.getType('sys_property_state')}">
                    <input type="radio" th:id="${'propertyState_' + dict.dictCode}" name="propertyState" th:value="${dict.dictValue}" th:field="*{propertyState}">
                    <label th:for="${'propertyState_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">备注：</label>
            <div class="col-sm-8">
                <input name="remark" th:field="*{remark}" class="form-control" type="text">
            </div>
        </div>
    </form>
</div>
<input id="codeUrl" type="text" th:value="${url}" hidden="hidden"/>
<div id="all" style="">
    <table class="businessCard">
        <tr>
            <td rowspan="4">
                <div id="qrcode"></div>
            </td>
            <td width="80px">
                公司名称 :
            </td>
            <td width="100px" >普诚</td>
        </tr>
        <tr>
            <td>
                资产编号 :
            </td>
            <td width="100px" th:text="${property.propertyNumber}"></td>
        </tr>
        <tr>
            <td>
                资产名称 :
            </td>
            <td width="100px" th:text="${property.propertyName}"></td>
        </tr>
        <tr>
            <td>
                配置信息 :
            </td>
            <td width="100px" th:text="${property.configurationInfo}"></td>
        </tr>
    </table>
</div>
<div>
    <div class="btn-group-sm" id="toolbar" role="group">
        <button type="button" class="btn btn-primary" onclick="clickPrint()">打印</button>
    </div>
</div>

<script type="text/javascript" src="/js/qrcodejs-master/qrcode.js"></script>
<script type="text/javascript" >


    var url = document.getElementById("codeUrl").value;
    console.log(url)
    var qrcode = new QRCode(document.getElementById("qrcode"), {
        text: url,
        width: 100,
        height: 100,
        // colorDark : "#f60",
        // colorLight : "#ccc",
        correctLevel : 3 ,// 二维码结构复杂性 0~3
    });

    function clickPrint() {
        // var all = document.body.innerHTML;
        // document.body.innerHTML = document.getElementById('all').innerHTML;
        // window.print();
        //
        // document.body.innerHTML = all;
        window.print();
    }

</script>
</body>
</html>

